.loader-container {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1105;
}

.loader {
  color: #8a2be2;
  width: 6px;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(-38px);
  animation: .5s linear 0s infinite alternate-reverse both running loader_3dot;
}

@keyframes loader_3dot {
  0% {
    box-shadow: 20px 0 0 6px #0c5eda, 40px 0 0 5px #8a2be2, 60px 0 0 2px #38ff03
  }
  50% {
    box-shadow: 20px 0 0 4px #8a2be2, 40px 0 0 3px #0c5eda, 60px 0 0 4px #8a2be2
  }
  100% {
    box-shadow: 20px 0 0 2px #38ff03, 40px 0 0 5px #8a2be2, 60px 0 0 6px #0c5eda
  }
}

.loader-backdrop {
  // scss-docs-start modal-backdrop-css-vars
  --#{$prefix}backdrop-zindex: #{$zindex-loader-backdrop};
  --#{$prefix}backdrop-bg: #{$loader-backdrop-bg};
  --#{$prefix}backdrop-opacity: #{$loader-backdrop-opacity};
  // scss-docs-end modal-backdrop-css-vars

  @include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));
}
